<template>
    <view class="container">
        <!-- 添加筛选组件 -->
        <filter-bar
            :filters="['department', 'status', 'filter']"
            :filter-data="filterData"
            @filter-change="onFilterChange"
        />
        
        <scroll-view class="scroll-view" scroll-y :show-scrollbar="false" @scrolltolower="loadMore" refresher-enabled
            :refresher-triggered="isTriggered" @refresherrefresh="onRefresh" :bounce="false" enable-back-to-top>
            <view class="list">
                <view class="list-item" v-for="(item, index) in listData" :key="index">
                    <text class="item-title">房源 {{ item.id }}</text>
                    <text class="item-desc">{{ item.content }}</text>
                </view>

                <view class="load-more">
                    <uni-load-more :status="loadMoreStatus"></uni-load-more>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 原有的数据
            isTriggered: false,
            refreshText: '下拉刷新',
            listData: [
                { id: 1, content: '房源：光谷青年城9号1单元3214·1，租客：杨子维' },
                { id: 2, content: '房源：明珠花园5号3单元701·1，租客：庞楚杨' },
                { id: 3, content: '房源：光谷悦城9号2单元1704·2，租客：刘幸宇' },
                { id: 4, content: '房源：保利华都28号1单元3003·3，租客：陈红林' },
                { id: 5, content: '房源：芭比伦堡6号4单元102·2，租客：瞿田' },
                { id: 6, content: '房源：中建大公馆16号2单元2202·2，租客：袁友盟' },
                { id: 7, content: '房源：金地中心城6号2单元204·3，租客：史清玉' },
                { id: 8, content: '房源：东湖尚郡12号1单元1503·1，租客：张明' },
                { id: 9, content: '房源：当代国际花园3号2单元2104·2，租客：李华' },
                { id: 10, content: '房源：华侨城1号4单元1802·3，租客：王强' },
                { id: 11, content: '房源：万科金色城市5号1单元901·1，租客：赵伟' },
                { id: 12, content: '房源：绿地大厦8号2单元1601·2，租客：孙芳' },
                { id: 13, content: '房源：星光时代2号3单元2003·3，租客：周杰' },
                { id: 14, content: '房源：融创中心4号1单元1702·1，租客：吴婷' },
                { id: 15, content: '房源：恒大华府6号4单元1203·2，租客：郑强' },
                { id: 16, content: '房源：招商江湾国际7号2单元1904·3，租客：刘洋' },
                { id: 17, content: '房源：龙湖时代天街9号1单元2101·1，租客：陈静' },
                { id: 18, content: '房源：保利城2号3单元1403·2，租客：张伟' },
                { id: 19, content: '房源：世茂锦绣长江1号4单元1602·3，租客：王丽' },
                { id: 20, content: '房源：复地东湖国际5号2单元2004·1，租客：李明' }
            ],
            loadMoreStatus: 'more',
            isLoading: false,
            noMore: false,
            page: 1,
            pageSize: 10,
            // 添加筛选相关数据
            filterData: {
                department: [
                    {
                        label: '总部',
                        value: 'HQ'
                    },
                    {
                        label: '收房部',
                        value: 'COLLECTION',
                        children: [
                            { label: '苏虎威', value: 'SHW' },
                            { label: '谭思达', value: 'TSD' }
                        ]
                    },
                    {
                        label: '出房部',
                        value: 'SALES',
                        children: [
                            { label: '曾开', value: 'ZK' },
                            { label: '付超', value: 'FC' }
                        ]
                    }
                ],
                status: [
                    { label: '已预定', value: 'RESERVED' },
                    { label: '合同待审批', value: 'CONTRACT_PENDING' },
                    { label: '签约中', value: 'SIGNING' },
                    { label: '在租中', value: 'RENTING' },
                    { label: '将搬入', value: 'MOVING_IN' },
                    { label: '即将离店', value: 'MOVING_OUT' },
                    { label: '今日到期', value: 'EXPIRE_TODAY' },
                    { label: '到期未退房', value: 'EXPIRED' }
                ],
                filter: [
                    {
                        title: '业务状态',
                        type: 'business',
                        options: [
                            { label: '待收款', value: 'PENDING_PAYMENT' },
                            { label: '有欠款', value: 'HAS_ARREARS' },
                            { label: '退租未结账', value: 'CHECKOUT_PENDING' }
                        ]
                    },
                    {
                        title: '房源状态',
                        type: 'house',
                        options: [
                            { label: '空房可租', value: 'VACANT' },
                            { label: '空房不可租', value: 'UNAVAILABLE' },
                            { label: '已出租', value: 'RENTED' },
                            { label: '脏房', value: 'DIRTY' },
                            { label: '维修', value: 'REPAIRING' },
                            { label: '锁房', value: 'LOCKED' }
                        ]
                    }
                ]
            }
        }
    },
    methods: {
        // 下拉过程中的提示
        onPullingDown(e) {
            this.refreshText = e.pullingDistance > e.viewHeight ? '释放立即刷新' : '下拉可以刷新'
        },
        // 下拉刷新
        onRefresh() {
            this.isTriggered = true
            this.page = 1
            this.getListData(true).then(() => {
                this.isTriggered = false
            })
        },
        // 上拉加载更多
        loadMore() {
            if (!this.isLoading && !this.noMore) {
                this.page++
                this.getListData()
            }
        },
        // 获取列表数据
        getListData(refresh = false) {
            this.isLoading = true
            this.loadMoreStatus = 'loading'

            return new Promise((resolve) => {
                setTimeout(() => {
                    const newData = Array.from({ length: this.pageSize }, (_, i) => ({
                        id: (this.page - 1) * this.pageSize + i + 1,
                        content: `这是第${this.page}页的第${i + 1}条测试内容`
                    }))

                    if (refresh) {
                        this.listData = newData
                    } else {
                        this.listData = [...this.listData, ...newData]
                    }

                    this.isLoading = false
                    this.noMore = this.page >= 3 // 模拟3页后没有更多数据
                    this.loadMoreStatus = this.noMore ? 'noMore' : 'more'
                    resolve() // 添加 resolve() 调用
                }, 1000)
            })
        },
        
        // 添加筛选处理方法
        onFilterChange({ type, value }) {
            console.log('筛选类型：', type)
            console.log('选中的值：', value)
            
            // 这里可以根据筛选条件重新请求数据
            this.page = 1
            this.getListData(true)
        }
    }
}
</script>

<style lang="scss">
.container {
    height: 100%;
    background-color: #f5f5f5;
}

.scroll-view {
    height: calc(100vh - var(--window-top) - 80rpx); // 减去筛选栏高度
    box-sizing: border-box;
}

.safe-area-inset-top {
    height: 20rpx;
}

.safe-area-inset-bottom {
    height: env(safe-area-inset-bottom);
}

.list {
    padding: 20rpx;
    box-sizing: border-box;
}

.list-item {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx;
    border-radius: 12rpx;

    .item-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
    }

    .item-desc {
        font-size: 28rpx;
        color: #666;
        display: block;
    }
}

.load-more {
    padding: 20rpx 0;
}
</style>